<template>
  <div>
    <header>
      <div class="w">
        <div class="header-title">
          <h1>我的购物车</h1>
          <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
      </div>
    </header>
    <hr>
    <div class="cart-warp">
      <div class="w list-head">
<!--        <div class="t-checkall">-->
<!--          <input id="checkall" type="checkbox" />-->
<!--          <label for="checkall"></label>全选-->
<!--        </div>-->
        <div class="car-img">&nbsp;</div>
        <div class="car-name">商品名称</div>
        <div class="car-price">单价</div>
        <div class="car-num">数量</div>
        <div class="car-total">小计</div>
        <div class="car-action">操作</div>
      </div>
      <form id="form">
        <div class="w list-body">
          <div v-for="(item,i) in list" class="item-box">
<!--            <div class="t-check">-->
<!--              <input :id="'input' + i " class="j-checkbox" type="checkbox" name="id" value=""/>-->
<!--              <label :for="'input' + i "></label>-->
<!--            </div>-->
            <div class="car-img">
              <img :src="item.cover" alt="">
            </div>
            <div class="car-name">{{item.name }}</div>
            <div class="car-price">{{item.price }}元</div>
            <div class="car-num">
              <div class="change-goods-num">
                <el-input-number v-model="item.num" @change="handleChange(item)" :min="1" :max="10"></el-input-number>
                <!--                <a href="javascript:;" class="J_minus">-</a>-->
<!--                <input type="text" class="goods-num" :value="item.buynum">-->
<!--                <a href="javascript:;" class="J_plus">+</a>-->
              </div>
            </div>
            <div class="car-total">{{item.sum }}</div>
            <div class="car-action"><a href="javascript:;" @click="del(item.id)" title="删除">&#10006</a></div>
          </div>
        </div>
        <div class="cart-bar w" id="J_cartBar">
          <div class="operation">
            <div class="amount-sum">已经选<em>{{list.length}}</em>件商品</div>
<!--            <a href="javascript:;" class="remove-batch" title="删除所选商品">删除所选商品</a>-->
<!--            <a href="javascript:;" class="clear-all" title="亲，点这里可以清理购物车哦">清理购物车</a>-->
          </div>
          <div class="toolbar-right">
            <div class="price-sum">总价：<em>￥{{ totalPrice }}</em>元</div>
            <button type="button" class="btn-area" @click="settle">去结算</button>
          </div>
        </div>
      </form>
    </div>
    <Footer/>
  </div>
</template>

<script>
import MyContainer from '@/components/Me/MyContainer'
import {mapGetters} from 'vuex'
import Footer from "@/views/fm/components/Footer";
import {delCart, listCart, updateCart} from "@/api/system/cart";
import {settle} from "@/api/system/orders";

export default {
  name: 'Detail',
  components: {Footer, MyContainer},
  computed: {
    ...mapGetters([
      'userId',
      'avatar',
      'name'
    ]),
    totalPrice() {
      return this.list.reduce((total, item) => {
        return total + item.sum
      }, 0)
    }
  },
  data() {
    return {
      list: [],
      active: 0,
    }
  },
  methods: {
    settle() {
      settle(this.list.map(item => item.id)).then(res => {
        if (res.code === 200) {
          this.$router.push({
            path: "/fm/settlement",
            query: {id: res.data}
          });
        } else {
          this.$modal.msg(res.msg);
        }
      })
    },
    listCart() {
      listCart({userId: this.userId}).then(({rows}) => {
        this.list = rows
      })
    },
    handleChange({id, num}) {
      updateCart({id, num}).then(() => {
        this.listCart()
      })
    },
    del(id) {
      delCart(id).then(() => {
        this.listCart()
      })
    }
  },
  created() {
    this.listCart()
  }
}
</script>

<style scoped lang="scss">
@import '~@/assets/styles/base.css';
@import '~@/assets/styles/car.css';
</style>
